<template>
	<div class="header">
		<div class="hearde-left">
			<span class="iconfont iconxiazai6"></span>
		</div>
		<div class="hearde-souch">
			<span class="iconfont iconsousuo"></span>
			<span>输入城市/景点/游玩主题</span>
		</div>
		<div class="hearde-right">
			<router-link to="/city">
				<span>{{citys || city}}</span><span class="iconfont iconjiantouarrow486"></span>
			</router-link>
		</div>
	</div>
</template>
<script>
	import {mapState} from "vuex"
	import BMap from 'BMap'
	export default {
	  	computed:{
	  		...mapState(["city"])
	  	}, 
        //定义数据
        data() {
          return {
            location: null,
            citys: ''
          }
        },
        methods: {
          //定义方法
          getCity() {
            let _this = this;
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
              const myGeo = new BMap.Geocoder()
              myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), data => {
                /*if (data.addressComponents) {
                  const result = data.addressComponents
                  const location = {
                    creditLongitude: r.point.lat, // 经度
                    creditLatitude: r.point.lng, // 纬度
                    creditProvince: result.province || '', // 省
                    creditCity: result.city || '', // 市
                    creditArea: result.district || '', // 区
                    creditStreet: (result.street || '') + (result.streetNumber || '') // 街道
                  };
                  _this.location = location;
                  _this.creditLongitude=location.creditLongitude;
                  _this.creditLatitude=location.creditLatitude;
                  _this.creditCity=location.creditCity;*/
                  console.log(location)
                _this.citys = data.addressComponents.city.replace('市', '')
                //}
              })
              // }
              // }
            })
          }
        },
        //mounted中引用
        mounted() {
          this.getCity();
        }
      }
</script>
<style scoped lang="stylus">
@import "~@/assets/css/common.styl"
	a{
		color:#fff;
	}
	.header{
		display: flex;
		background-color: $bgcolor;
	}
	.hearde-left{
		display: inline-block;
	    width: .4rem;
	    line-height: .88rem;
	    padding: 0 .2rem;
	    color: #fff;
	    font-size: .36rem;
	    text-align: left;
	}
	.hearde-souch{
		flex:1;
		background-color: #fff;
		font-size: .28rem;
		height: .7rem;
		margin-top: .1rem;
		line-height: .7rem;
		border-radius: .06rem;
		margin-right: .1rem;
		text-indent: .2rem;
		color:#e4e7ea;
	}
	.hearde-right{
	    font-size: .28rem;
		line-height: .88rem;
		color:#fff;
	}
</style>